<template>
  <div class="notMember_box">
    <h1>收费清单</h1>

    <!-- 收费对话框 -->
    <el-dialog v-model="carMoneyVisible" title="收费登记">
      <el-form :model="carMoney">

        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="carMoney.carnumber" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="停车场" :label-width="formLabelWidth">
          <el-input v-model="carMoney.id" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="收费员姓名" :label-width="formLabelWidth">
          <el-input v-model="carMoney.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收取费用" :label-width="formLabelWidth">
          <el-input v-model="carMoney.money" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="carMoneyVisible = false">取消</el-button>
          <el-button type="info" @click="carMoneyFN">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 收费清单 -->
    <el-table :data="carMoneyDate" style="width: 100% ;margin-top:15px;" fit border>
      <el-table-column prop="parkid" label="停车场" :formatter="parkFormatter" />
      <el-table-column prop="name" label="收费员姓名" />
      <el-table-column prop="carnumber" label="车牌号" />
      <el-table-column prop="money" label="支付金额（元）" />
      <el-table-column prop="cashtime" label="支付时间" />
      <el-table-column prop="intime" label="进场时间" />
      <el-table-column prop="outtime" label="出场时间" />
      <el-table-column prop="isvip" label="是否是vip" />

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue"
import { carMoneyAPI } from "@/api/charge"
import { ElMessage } from 'element-plus'
import type { ICarMoneyList } from "@/untils/type"
import { useStore } from 'vuex'

const store = useStore();

const formLabelWidth = "86px";

let carMoneyVisible = ref<boolean>(true)
let props = defineProps({
  parkid: Number,
  carnumber: String,
})

let carMoney = reactive({
  money: null,
  carnumber: props.carnumber,
  name: '',
  id: props.parkid,
})
let carMoneyDate: Array<ICarMoneyList> = reactive<Array<ICarMoneyList>>([]);
let parkSet = reactive([]);


// 收费登记数据提交
function carMoneyFN() {
  carMoneyAPI({ ...carMoney }).then((res: any) => {
    console.log(res.data);
    ElMessage({
      showClose: true,
      message: res.msg,
    })
    if (res.code == 2000) {
      carMoneyDate.splice(0, carMoneyDate.length, res.data);
      // console.log(carMoneyDate);
      carMoneyVisible.value = false;

    }
  })

}

//数据处理  停车场
store.commit('GET_PARKSET')
parkSet = store.state.parkSet;
function parkFormatter(row: any) {
  let parkTitle = ref('');
  parkSet.map((item: any) => {
    // console.log(item);
    if (row.parkid == item.id) {
      parkTitle.value = item.title;
    }
  })
  return parkTitle.value;

}
</script>

<style lang="less" scoped>
.notMember_box {
  width: 100%;
  height: 100%;
}
</style>